<template>
<div>
  <div id="message">
    <p class="xiaoXi">消息</p>
    <div class="xiBox">
      <img :src="imgUrl" alt=""><span>系统消息</span>
    </div>
    <div class="xiaoXiBottom">
    <span class="zan">暂无消息</span>
      <!-- <img :src="imgUrl2" alt=""><span class="'zan">暂无消息</span> -->
    </div>
  </div>
  <tabbar></tabbar>
</div>
  
</template>

<script>
import tabbar from '../../components/tabbar/tabbar';
export default {
  components:{
    tabbar
  },
  data(){
    return {
      imgUrl:"../../../static/images/message/news01.png",
      imgUrl2:"../../../static/images/message/news02.png"
    }
  }
};
</script>

<style lang="less" scoped>
.xiaoXi{
  padding-left: 40px;
  margin-top: 60px;
  font-size: 36px;
  text-align: left;
  // border: 1px solid red;
}
.xiBox{
  margin-top: 76px;
  display: flex;
  // border: 1px solid red;
  img {
    margin-left: 45px;
    width: 85px;
    height: 85px;
  }
  span {
    margin-left: 15px;
    font-size: 26px;
    line-height: 85px;
    // border: 1px solid red;
  }
  
}
.xiaoXiBottom {
  width: 100%;
  height: 600px;
  margin-top: 275px;
 background-image: url(../../../static/images/message/news02.png);
 background-size: 450px 550px;
 background-repeat: no-repeat;
 background-position: 160px 1px;
  // border: 1px solid red;
 .zan {
   display: inline-block;
   margin-left: 15px;
   margin-top: 260px;
   font-size: 22px;
   color: rgb(199, 195, 195);
  //  border: 1px solid red;
 }
}

</style>